<template>
    <div>
        <MyTitle title="意见详情"></MyTitle>
        <el-row class="mt10">
            <el-col>
                <div class="adviseitem" v-if="adviseData">
                    <el-descriptions :title="adviseData.title" direction="vertical" :column="4" :size="'default'" border
                        class="elitem">
                        <el-descriptions-item label="意见内容" :span="4">
                            <div v-html="adviseData.content">
                            </div>
                        </el-descriptions-item>
                        <el-descriptions-item label="意见人">{{ adviseData.author.username }}</el-descriptions-item>
                        <el-descriptions-item label="手机号">{{ adviseData.author.phone }}</el-descriptions-item>
                        <el-descriptions-item label="权限" :span="1">
                            <el-tag style="margin:0 3px;" size="small"
                                :color="roleList.find((v) => v.value == adviseData.author.role).color">
                                {{ roleList.find((v) => v.value == adviseData.author.role).label }}
                            </el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="意见类型" :span="1">
                            <el-tag style="margin:0 3px;" size="small" v-for="(l, i) in adviseData.type" :key="i">
                                {{ l }}
                            </el-tag>
                        </el-descriptions-item>

                        <el-descriptions-item label="发表时间" :span="2">
                            <span>{{ $filters.timeFormat(adviseData.time) }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="操作" :span="2">
                            <el-button size="small" type="info">评论</el-button>
                            <el-button size="small" type="danger">点赞</el-button>
                            <el-button size="small" type="success">收藏</el-button>
                        </el-descriptions-item>
                        <el-descriptions-item label="评论列表" :span="4">

                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, toRaw, onMounted, computed } from 'vue'
import { Edit, Picture, Upload } from '@element-plus/icons-vue'
import { AdviseTypes } from '../../utils'
import { ShowError } from '../../utils/message';
import { Http } from '../../api/api';
import router from '../../router';
import { useStore } from '../../store';
import { useRoute } from 'vue-router';
const route = useRoute()
const adviseData = ref<any>(null)
const store = useStore()
const roleList = computed(() => store.roleList)
const getadviseoneData = async () => {
    let res = await Http.getadviseone({
        _id: route.params.aid,
    }) as any;
    if (res.code == 200) {
        adviseData.value = res.result
    }
}

onMounted(() => {
    getadviseoneData()
})
</script>

<style lang="scss" scoped>
.adviseitem {


    margin: 20px 20px;

    .elitem {
        box-shadow: 0px 0px 2px 2px #ddd;
        border-radius: 10px;
        padding: 20px;
    }
}
</style>
